<template>
	<view class="main">
		<!-- 		<uni-notice-bar show-icon scrollable color="#2979FF" background-color="#EAF2FF"
			:text="`今日通证价格 1 通证 = ${latestPrice} 元`" />
		<view class="msg-card">
			<view class="left">
				<view class="title">
					我的通证
				</view>
				<view class="sub-title">
					{{tokenNum}}
				</view>
			</view>
			<view class="right">
				<view class="title">
					可兑换
				</view>
				<view class="sub-title">
					￥ {{maxprice}}
				</view>
			</view>
		</view>
		<view class="with-draw">
			<view class="left">
				通证数：
			</view>
			<view class="right">
				<input class="uni-input" type="number" v-model="curNum" placeholder="输入通证数量(整数)" />
			</view>
		</view>
		<view class="submit-btn">
			<button @click="submit" :disabled="curNum === ''" :class="curNum === ''?'dis-btn':''">提现</button>
		</view>
	</view> -->
		<view class="topCard">
			<view class="top">
				今日{{$tokenName}}价格：{{latestPrice}}
			</view>
			<view class="subtop">
				我的{{$tokenName}}：{{tokenNum}}
			</view>
		</view>
		<view class="bottom">
			<view class="title">
				提现{{$tokenName}}数量
			</view>
			<view class="ipt">
				<input class="uni-input" type="number" placeholder-style="font-size:30rpx" v-model="curNum" 
				:placeholder="'输入'+$tokenName+'数量(整数)'"/>
			</view>
			<view class="more">
				<text class="left">最多可提现 <text class="num">{{maxprice}}</text> 元</text>
				<!-- <text class="right">相当于 <text class="num">{{changePrice}}</text> 元 </text> -->
			</view>
			<view class="submit-btn">
				<button v-if="type === 0" @click="submit" :disabled="curNum === ''" :class="curNum === ''?'dis-btn':''">提现</button>
				<button v-if="type === 1" @click="toPage">去实名</button>
				<button v-if="type === 2" @click="toPage">去绑卡</button>
			</view>
		</view>
	</view>
</template>

<script>
	import {
		reqGetRealnameStatus
	} from '@/apis/my.js'
	import {
		getCashInfo,
		withdraw
	} from "@/apis/first.js"
	export default {
		computed: {
			maxprice() {
				let num = (parseInt(this.tokenNum) * this.latestPrice).toFixed(2);
				if (isNaN(num)) {
					return 0;
				} else {
					return num;
				}
			},
			$tokenName(){
        return this.$config.tokenName
      },
			// changePrice(){
			// 	let num = (this.curNum * this.latestPrice).toFixed(2);
			// 	if (isNaN(num)) {
			// 		return 0;
			// 	} else {
			// 		return num;
			// 	}
			// }
		},
		data() {
			return {
				tokenNum: '',
				latestPrice: '',
				curNum: '',
				// 0 实名绑卡完成 1 未实名 2 未绑卡
				type:1,
				
			}
		},
		onLoad() {
			this.info = this.$store.getters.userInfo
		},
		onShow() {
			this.getCashInfo();
			this.getRealnameStatus();
		},
		methods: {
			toPage(){
				if(this.type === 1){
					uni.redirectTo({
						url:'/packageB/pages/RealName/RealName',
					});
				}else if(this.type === 2){
					uni.redirectTo({
						url:'/packageB/pages/bankCard/bankCard',
					});
				}
			},
			async getRealnameStatus() {
				let resd = await reqGetRealnameStatus({
					id: this.info.id
				});
				if(resd.code === 200){
					this.type = 0
				}else if(resd.code === 51003){
					this.type = 1
				}else if(resd.code === 51004){
					this.type = 2
				}
				// if (resd.code !== 200) {
				// 	uni.showModal({
				// 		content: resd.message,
				// 		confirmText: '去完善',
				// 		cancelColor: '#999',
				// 		confirmColor: '#2f64ff',
				// 		mask: true,
				// 		success: (res) => {
				// 			if (res.confirm) {
				// 				let url = '';
				// 				if (resd.code === 51003) {
				// 					url = '/packageB/pages/RealName/RealName';
				// 				} else if (resd.code === 51004) {
				// 					url = '/packageB/pages/bankCard/bankCard'
				// 				}

				// 				// url = '/packageB/pages/RealName/RealName';

				// 				uni.redirectTo({
				// 					url,
				// 				});
				// 			} else {
				// 				uni.navigateBack();
				// 			}
				// 		},
				// 	})
				// }
			},
			async getCashInfo() {
				const res = await getCashInfo({
					id: this.info.id
				})
				let data = res.data
				if (res.code == 200) {
					this.tokenNum = data.tokenNum;
					this.latestPrice = data.latestPrice
				}
			},
			async submit() {
				let {
					curNum,
					tokenNum
				} = this;
				let flag = false;
				// 范围的上下限
				const minValue = 1;
				const maxValue = tokenNum;
				const regex = /^\d+$/;
				if (regex.test(curNum)) {
					const num = parseInt(curNum);
					if (num >= minValue && num <= maxValue) {
						flag = true;
					} else {
						flag = false;
						uni.utils.toast(`${this.$tokenName}数量不足`);
						// if (tokenNum < 1) {
						// 	uni.utils.toast('通证数量不足');
						// } else {
							
						// 	uni.utils.toast('请输入1--' + parseInt(tokenNum) + '的整数')
						// }
					}
				} else {
					flag = false;
					uni.utils.toast('请输入合法的整数')
				}

				if (!flag) return;

				let data = await withdraw({
					cashOutNum: this.curNum,
					id: this.info.id
				})
				this.curNum = '';
				if (data.code == 200) {
					uni.showToast({
						title: '提现成功',
						icon: 'success',
						duration: 2000,
						mask: true
					})
					setTimeout(() => {
						uni.switchTab({
							url: '/pages/my/index'
						})
					}, 2000)
				} else {
					uni.utils.toast(data.message);
					// 防止转账成功，提现失败
					
					setTimeout(() => {
						this.getCashInfo();
					}, 2000)
				}
			},
		}
	}
</script>
<style>
	page {
		background: #f7f7f7;
	}
</style>
<style lang="scss" scoped>
	.main {
		display: flex;
		flex-direction: column;
		height: 100vh;

		.topCard {
			padding: 0rpx 30rpx;
		}

		.top {
			padding: 40rpx 0;
			color: #1a1a1a;
			font-size: 28rpx;
		}

		.subtop {
			margin-bottom: 40rpx;
			color: #1a1a1a;
			font-size: 28rpx;
		}

		.bottom {
			flex: 1;
			background-color: #fff;
			padding: 40rpx 30rpx;
			border-radius: 32rpx 32rpx 0 0;

			.title {
				color: #1a1a1a;
				font-size: 28rpx;
				margin-bottom: 20rpx;
			}

			.ipt {
				margin-bottom: 20rpx;

				/deep/ input {
					width: 100%;
					height: 100rpx;
					text-align: left;
					font-size: 48rpx;
					
					background-color: transparent !important;
					border-bottom: 1px solid #e6e6e6;
				}
			}

			.more {
				color: #999;
				font-size: 28rpx;
				margin-bottom: 120rpx;
				display: flex;
				justify-content: center;
				.left{
					flex:1;
					.num {
						color: #0934ff;
					}
				}
				.right{
					flex:1;
					text-align: right;
					.num{
						color: #0934ff;
					}
				}
			}

			.submit-btn {
				padding: 0 30rpx;

				/deep/ button {
					background-color: #2f64ff;
					color: #fff;
				}

				.dis-btn {
					background-color: #eee;
				}
			}
		}
	}
</style>